<!doctype html>
<html>
<head>
	<title>自动模拟 - 沙盒</title>
	<link href="automatic.css" rel="stylesheet" type="text/css">
	<link href="doubleslider.css" rel="stylesheet" type="text/css">
	<style type="text/css">
	input{
		margin-bottom: 15px;
	}
	</style>
</head>
<body>
	<div id="container">
		<canvas id="canvas" width="600" height="600"></canvas>
		<div id="stats">

			<div id="stats_canvas_container">
				<canvas id="stats_canvas" width="370" height="270"></canvas>
				<div id="stats_text"></div>
			</div>

			如果 <span class="highlight">&lt;<span id="bias_text">33%</span></span> 
			或 <span class="highlight">&gt;<span id="nonconform_text">100%</span></span> 的邻居和我一样，我就移动出去
			<br>
			<div id="slider"></div>
			<br>

			正方形：三角形的比例是
			<span class="highlight"><span id="ratio_text_triangles">40</span>:<span id="ratio_text_squares">40</span></span>,
			板上有
			<span class="highlight" id="empty_text">20% 为空</span>
			<br>
			<div id="slider2"></div>
			<br>

			<div class="ui" id="moving" onclick="START_SIM=!START_SIM; doneBuffer = 60; window.writeStats()"></div>
			<div class="ui" id="reset" onclick="reset()" style="margin-left:9px"></div>

		</div>
	</div>
</body>
</html>

<script src="../lib/Mouse.js"></script>
<script src="automatic.js"></script>
<script src="doubleslider.js"></script>
<script>
window.PICK_UP_ANYONE = true;

var bias_text = document.getElementById("bias_text");
var nonconform_text = document.getElementById("nonconform_text");

var whatever = new DoubleSlider(document.getElementById("slider"),{
	backgrounds:[
		{color:"#555",icon:"ds_sad.png"},
		{color:"#aaa",icon:"ds_happy.png"},
		{color:"#555",icon:"ds_sad.png"}
	],
	values:[0.20,0.80],
	onChange:function(values){
		
		window.BIAS = values[0];
		window.NONCONFORM = values[1];

		// Write stats
		START_SIM = false;
		window.writeStats();
		bias_text.innerHTML = Math.round(window.BIAS*100)+"%";
		nonconform_text.innerHTML = Math.round(window.NONCONFORM*100)+"%";

	}
});

var whatever = new DoubleSlider(document.getElementById("slider2"),{
	backgrounds:[
		{color:"#FFDD56",icon:"ds_happy.png"},
		{color:"#567DFF",icon:"ds_happy.png"},
		{color:"#000",icon:"ds_sad.png"}
	],
	values:[0.40,0.80],
	onChange:function(values){

		// Actual values
		var VALUE_1 = values[0];
		var VALUE_2 = values[1];
		window.EMPTINESS = 1-VALUE_2;
		window.RATIO_TRIANGLES = VALUE_1/VALUE_2;
		window.RATIO_SQUARES = (VALUE_2-VALUE_1)/VALUE_2;

		// Write stats
		START_SIM = false;
		document.getElementById("ratio_text_triangles").innerHTML = Math.round(window.RATIO_TRIANGLES*100);
		document.getElementById("ratio_text_squares").innerHTML = Math.round(window.RATIO_SQUARES*100);
		document.getElementById("empty_text").innerHTML = Math.round(window.EMPTINESS*100)+"% 为空";

	},
	onLetGo:function(){
		reset();
	}
});

</script>
